<template>
  <view class="contianer-sale">
    <!-- 搜索会员卡(手机摄像头扫描) -->
    <view class="container-card">
      <u-form :model="cardnumberform" ref="uForm">
        <div class="cardnumber-contianer">
          <u-form-item class="card-input"
            ><u-input
              border="true"
              v-model="cardnumberform.cardnumber"
              placeholder="请输入您的会员卡号/手机号"
          /></u-form-item>
          <u-button @click="searchCardnumber" type="primary"
            >查询会员卡</u-button
          >
        </div>
      </u-form>
      <view>
        <!-- 会员卡列表 -->
        <view v-if="cardlist.length > 0" class="cardlist">
          <view
            @click="handleClick(index, item)"
            :class="[{ 'card-item-active': index == activeIndex }]"
            class="card-item"
            v-for="(item, index) in cardlist"
            :key="index"
          >
            <view class="subitem">
              <view>手机号:</view>
              <view>{{ item.mobile }}</view>
            </view>

            <view class="subitem"
              ><view>类别:</view> <view>{{ item.titile }}</view></view
            >
            <view class="subitem"
              ><view>卡级别:</view> <view>{{ item.astrict_text }}</view></view
            >
            <view class="subitem"
              ><view>卡类型:</view> <view>{{ item.type_text }}</view></view
            >
            <!-- 可租赁数量 -->
            <view class="subitem"
              ><view>可租赁数量:</view> <view>{{ item.num }}</view></view
            >
            <!-- 未归还数量 -->
            <view class="subitem"
              ><view v-if="item.not_return_num">未归还数量:</view>
              <view>{{ item.not_return_num }}</view></view
            >

            <view class="subitem"
              ><view>到期时间:</view> <view>{{ item.endtime_text }}</view></view
            >
          </view>
        </view>
        <view v-else
          ><u-empty style="text-align: center" text="暂无会员卡数据"></u-empty
        ></view>
      </view>
    </view>

    <!-- 商品扫码(条形码) -->
    <view>
      <u-form :model="goodsnumberform" ref="uForm">
        <div class="cardnumber-contianer">
          <u-form-item class="card-input"
            ><u-input
              border="true"
              v-model="goodsnumberform.goodsnumber"
              placeholder="请扫描条形码"
          /></u-form-item>

          <u-button @click="searchGood" type="primary">查询商品</u-button>
        </div>
      </u-form>

      <!-- 真实扫码 -->
      <!-- <view>
        <u-button @click="saoMa()" type="primary">扫码查询</u-button>
      </view> -->
      <!-- 未归还商品列表 -->
      <view class="goodslist-container">
        <u-table>
          <u-tr class="u-tr">
            <u-th class="u-th">名称</u-th>
            <u-th class="u-th">规格</u-th>
            <u-th class="u-th">单价</u-th>
            <u-th class="u-th">租赁时间</u-th>
            <u-th class="u-th">操作</u-th>
          </u-tr>

          <u-tr
            class="u-tr"
            v-for="(item, index) in goodsitemlist"
            :key="index"
          >
            <u-td class="u-td">{{ item.goods.title }}</u-td>
            <u-td class="u-td">{{ item.goods_sku_value.value }}</u-td>
            <u-td class="u-td">{{ item.goods.price }}</u-td>
            <u-td class="u-td">{{ item.create_order_time }}</u-td>
            <u-td class="u-td">
              <button @click="handleReturn(index, item)" class="del-btn">
                归还
              </button>
            </u-td>
          </u-tr>
        </u-table>
      </view>
    </view>

    <u-toast ref="uToast" />
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 会员卡
      cardnumberform: {
        cardnumber: "",
      },
      // 会员卡列表
      cardlist: [
        // {
        //   tel: "18443128596",
        //   title: "这是标题",
        //   grade: "199",
        //   cardtype: "打折卡",
        //   time: "2021-02-01",
        // },
      ],

      //   搜索商品
      goodsnumberform: {
        goodsnumber: "",
      },
      // 商品最终列表
      goodsitemlist: [],
      // 商品列表
      goodslist: {},
      // 商品规格
      goodsvaluelist: {},
      goodsobj: {
        // 商品名称
        goodsname: "",
        // 商品规格
        goodsvalue: "",
        // 商品单价
        goodssingleprice: "",
        // 商品数量
        goods: 1,
        id: 0,
        // 租赁时间
        renttime: "",
      },
      // 商品id数组
      goodsidlist: [],

      // 卡片选中项
      activeIndex: -1,

      // 租赁类型
      type: "2",
      // 会员卡的id
      cardid: 0,
      // 会员卡类型
      cardtype: "",
      // 订单号
      dingdanhao: "",
      // 租赁方式
      renttype: "zl",
      // 租赁卡数量
      rentnum: 0,
      // 订单号
      dingdanhao: "",
    };
  },
  created() {
    // console.log(this.countNum);
  },
  mounted() {
    // console.log(this.countNum);
  },
  computed: {},
  methods: {
    // 查询会员卡
    searchCardnumber() {
      console.log("----查询会员卡----");

      uni.request({
        url: "http://gxyckf.1qit.com/api/admin.return_goods/getNotReturnUserCardByMobile",
        method: "POST",
        data: {
          // 手机号/会员卡号
          mobile: this.cardnumberform.cardnumber,
        },
        header: {
          // token: "adminb0e5df2a-78ae-48e0-8614-1c7ee2a53173",
          token: uni.getStorageSync("token"),
        },
        success: (res) => {
          console.log(res.data.data);

          if (res.data.code !== 1) {
            uni.showToast({
              title: res.data.msg,
              icon: "none",
              duration: 2000,
            });
            this.cardlist = [];
            this.cardnumberform.cardnumber = "";
          } else {
            // this.cardnumberform.cardnumber = "";

            this.cardlist = JSON.parse(JSON.stringify(res.data.data));
          }
        },
      });
    },
    // 手机号加扫码查询未归还卡
    searchGood() {
      console.log("----查询商品---");
      if (this.cardnumberform.cardnumber == "") {
        this.$refs.uToast.show({
          title: "请您输入手机号并扫描商品码",
          type: "default",
        });
      } else {
        uni.request({
          url: "http://gxyckf.1qit.com/api/admin.return_goods/getNotReturnUserCardBySkuCode",
          method: "POST",
          data: {
            // 商品id
            skuId: this.goodsnumberform.goodsnumber,
            mobile: this.cardnumberform.cardnumber,
          },
          header: {
            // token: "adminb0e5df2a-78ae-48e0-8614-1c7ee2a53173",
            token: uni.getStorageSync("token"),
          },
          success: (res) => {
            if (res.data.code !== 1) {
              uni.showToast({
                title: res.data.msg,
                icon: "none",
                duration: 2000,
              });
            } else {
              console.log(res.data.data);
              this.cardlist = JSON.parse(JSON.stringify(res.data.data));
            }
          },
        });
      }
    },

    // 点击卡片事件
    handleClick(index, item) {
      console.log("-----点击卡片了------");
      this.activeIndex = index;
      // 会员卡的id
      this.cardid = item.id;
      console.log(this.cardid);
      this.cardtype = item.type_text;
      this.rentnum = item.num;
      //   点击卡片找未归还的商品
      uni.request({
        url: "http://gxyckf.1qit.com/api/admin.return_goods/getGoodsByCardId",
        method: "POST",
        data: {
          // 会员卡id
          card_id: this.cardid,
        },
        header: {
          // token: "adminb0e5df2a-78ae-48e0-8614-1c7ee2a53173",
          token: uni.getStorageSync("token"),
        },
        success: (res) => {
          if (res.data.code !== 1) {
            uni.showToast({
              title: res.data.msg,
              icon: "none",
              duration: 2000,
            });
          } else {
            // this.cardnumberform.cardnumber = "";
            console.log(res.data.data);
            this.goodsitemlist = res.data.data;

            // this.goodslist = res.data.data.goods;
            // this.goodsvaluelist = res.data.data.goods_sku_value;

            // // 取商品名称
            // this.goodsobj.goodsname = this.goodslist.title;
            // // 单价
            // this.goodsobj.goodssingleprice = this.goodslist.price;
            // // 规格
            // this.goodsobj.goodsvalue = this.goodsvaluelist.value;
            // //   租赁时间
            // this.goodsobj.renttime = res.data.data.create_order_time;

            // // 商品id
            // this.goodsobj.id = res.data.data.id;
            // this.goodsitemlist.push(JSON.parse(JSON.stringify(this.goodsobj)));
            // this.goodsidlist = this.goodsitemlist.map((item) => {
            //   return item.id;
            // });
            // console.log(this.goodsidlist);

            // this.cardlist = JSON.parse(JSON.stringify(res.data.data));
          }
        },
      });
    },
    // 商品归还
    handleReturn(index, item) {
      var that = this;
      console.log(item);

      uni.showModal({
        title: "归还",
        content: "确认归还吗?",
        success: function (res) {
          if (res.confirm) {
            console.log("用户点击确定");
            uni.request({
              url: "http://gxyckf.1qit.com/api/admin.return_goods/returnGoods",
              method: "POST",
              data: {
                // 会员卡id
                cardId: that.cardid,
                // item.sku_id
                goodSkuId: item.id,
              },
              header: {
                // token: "adminb0e5df2a-78ae-48e0-8614-1c7ee2a53173",
                token: uni.getStorageSync("token"),
              },
              success: (res) => {
                if (res.data.code !== 1) {
                  uni.showToast({
                    title: res.data.msg,
                    icon: "none",
                    duration: 2000,
                  });
                } else {
                  uni.showToast({
                    title: res.data.msg,
                    icon: "success",
                    duration: 2000,
                  });
                  console.log(index);
                  that.goodsitemlist.splice(index, 1);
                }
              },
            });
          } else if (res.cancel) {
            console.log("用户点击取消");
          }
        },
      });
      //   取skuid
      // item.sku_id
      //   this.goodsitemlist.splice(index, 1);
      //   this.goodsidlist.length--;
    },

    // 扫码查询
    saoMa() {
      uni.scanCode({
        // success: function (res) {
        //   console.log(JSON.stringify(res.result));
        // },
        scanType: ["barCode"],
        success: function (res) {
          console.log("条码类型：" + res.scanType);
          console.log("条码内容：" + res.result);
        },
      });
    },
  },
};
</script>

<style scoped>
.container-card {
  /* margin-bottom: 40rpx; */
}
.contianer-sale {
  background: #fff;
  padding: 0px 40rpx;
}
.dflex-btn {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.subitem {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10rpx 0;
}
.cardlist {
  background: #fff;
  padding: 40rpx 0;
  overflow-y: auto;
  height: 260rpx;
}
.card-item {
  color: #fff;
  font-size: 30rpx;
  font-weight: 600;
  background: #2979ff;
  opacity: 0.4;
  padding: 10rpx;
  box-shadow: 0 0 30rpx #ddd;

  border-radius: 20rpx;
  margin-bottom: 20rpx;
}
.card-item-active {
  background: #2979ff;
  opacity: 1;
}

.goodslist-container {
  overflow-y: auto;
  height: 500rpx;
}
.u-th {
  width: 184rpx;
}
.u-td {
  width: 184rpx;
}
.del-btn {
  font-size: 20rpx;

  outline: none;
  background: #2979ff;
  color: #fff;
}

.cardnumber-contianer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.card-input {
  flex: 1;
  margin-right: 5rpx;
}
.jiesuan {
  overflow: hidden;
  width: 100%;
  position: fixed;
  box-shadow: 0 0 20rpx #ccc;
  background: #fff !important;
  padding-top: 10rpx;
  bottom: 0;
  right: 0;
  z-index: 9999;
}
.h {
  display: flex;
  justify-content: flex-end;
}
.pay-btn {
  text-align: right;
  justify-content: flex-end;
  padding-top: 30rpx;
  display: flex;
  align-items: center;
}
.pay-totalprice {
  font-size: 32rpx;
  font-weight: 600;
}
.pay-l {
  margin-right: 20rpx;
}
.pay-r {
  margin-right: 20rpx;
}
.tejia {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.zhekou-box {
  /* z-index: 999999; */
  display: flex;
  align-items: center;
  position: fixed;
  bottom: 290rpx;
}
.zhekoubox-item {
  display: flex;
  align-items: center;
}
.warp {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.rect {
  width: 320rpx;
  height: 320rpx;
  background-color: #fff;
}
img {
  width: 100%;
  height: 100%;
  display: block;
}
</style>
